<template>
    <div class="range-indicators-info">
        <el-row>
            <el-col :span="12" style="border-right: 1px solid #cacaca; height: calc(100vh - 100px); overflow: auto">
                <div class="left">
                    <div class="left-base">基础信息</div>
                    <div class="left-baseinfo">
                        <div class="left-baseinfo-item">
                            <div class="left-baseinfo-item-label">范围编号：</div>
                            <div class="left-baseinfo-item-input">
                                <el-input
                                    size="mini"
                                    :disabled="operateType !== 'add'"
                                    v-model="originalBoundConfig.boundCode"
                                    placeholder="不手动输入、按原规则取"
                                    maxlength="10"
                                />
                            </div>
                        </div>
                        <div class="left-baseinfo-item">
                            <div class="left-baseinfo-item-label">范围名称：</div>
                            <div class="left-baseinfo-item-input"><el-input size="mini" v-model="originalBoundConfig.boundName" /></div>
                        </div>
                        <div class="left-baseinfo-item">
                            <div class="left-baseinfo-item-label">范围类型：</div>
                            <div class="left-baseinfo-item-input">
                                <el-select size="mini" v-model="originalBoundConfig.boundType" @change="changeBoundType">
                                    <el-option
                                        v-for="item in boundTypes"
                                        :key="item.dictKey"
                                        :label="item.dictKey + ' ' + item.dictKeyName"
                                        :value="item.dictKey"
                                    />
                                </el-select>
                            </div>
                        </div>
                        <div class="left-baseinfo-item">
                            <div class="left-baseinfo-item-label">业务品种：</div>
                            <div class="left-baseinfo-item-input">
                                <el-select
                                    size="mini"
                                    v-model="originalBoundConfig.categoryCodes"
                                    @change="changeCategoryCodes"
                                    placeholder="可多选"
                                    multiple
                                    collapse-tags
                                    clearable
                                >
                                    <el-option
                                        v-for="item in computedCategorys"
                                        :key="item.dictKey"
                                        :label="item.dictKey + ' ' + item.dictKeyName"
                                        :value="item.dictKey"
                                    />
                                </el-select>
                            </div>
                        </div>
                        <div class="left-baseinfo-item">
                            <div class="left-baseinfo-item-label">来源表简称：</div>
                            <div class="left-baseinfo-item-input"><el-input size="mini" v-model="originalBoundConfig.sourceTableShortName" /></div>
                        </div>
                        <div class="left-baseinfo-item">
                            <div class="left-baseinfo-item-label">来源表字段：</div>
                            <div class="left-baseinfo-item-input">
                                <el-input size="mini" v-model="originalBoundConfig.sourceTableField" @change="changeSourceTableField" />
                            </div>
                        </div>
                        <div class="left-baseinfo-item">
                            <div class="left-baseinfo-item-label">项目标识：</div>
                            <div class="left-baseinfo-item-input">
                                <el-select size="mini" v-model="originalBoundConfig.projectSymbol">
                                    <el-option value="0" label="0 产品" />
                                    <el-option value="1" label="1 项目" />
                                </el-select>
                            </div>
                        </div>
                        <div class="left-baseinfo-item">
                            <div class="left-baseinfo-item-label">展示字段：</div>
                            <div class="left-baseinfo-item-input"><el-input size="mini" v-model="originalBoundConfig.displayField" /></div>
                        </div>
                        <div class="left-baseinfo-item" style="width: 100%">
                            <div class="left-baseinfo-item-label">范围说明：</div>
                            <div class="left-baseinfo-item-input" style="width: calc(100% - 66px)">
                                <el-input size="mini" v-model="originalBoundConfigExtra.boundDescription" style="width: 100%" />
                            </div>
                        </div>
                        <div class="left-baseinfo-item" style="height: 38px">
                            <div class="left-baseinfo-item-label">单独控制：</div>
                            <div class="left-baseinfo-item-input">
                                <el-checkbox size="mini" v-model="originalBoundConfig.separateValid" style="margin-right: 10px"></el-checkbox>
                            </div>
                        </div>
                        <div class="left-baseinfo-item">
                            <div class="left-baseinfo-item-label">控制字段：</div>
                            <div class="left-baseinfo-item-input">
                                <el-input size="mini" v-model="originalBoundConfig.separateField" :disabled="!originalBoundConfig.separateValid" />
                            </div>
                        </div>
                        <div class="left-baseinfo-item">
                            <div class="left-baseinfo-item-label" style="width: 130px">是否显示静态详情：</div>
                            <div class="left-baseinfo-item-input">
                                <el-checkbox
                                    size="mini"
                                    v-model="originalBoundConfig.showStaticDetails"
                                    :true-label="1"
                                    :false-label="0"
                                ></el-checkbox>
                            </div>
                        </div>

                        <div class="left-baseinfo-item">
                            <div class="left-baseinfo-item-label">控制维度：</div>
                            <div class="left-baseinfo-item-input select-dis">
                                <!-- <vxe-select v-model="originalBoundConfig.spliceMethods" size="mini" multiple transfer style="width:100%">
                                    <vxe-option value="0" label="按证券代码控制" disabled> </vxe-option>
                                    <vxe-option value="1" label="按产品代码控制"></vxe-option>
                                </vxe-select> -->
                                <el-select v-model="originalBoundConfig.spliceMethods" size="mini" multiple>
                                    <el-option value="0" label="按证券代码控制" disabled />
                                    <el-option value="1" label="按产品代码控制" />
                                    <!-- <el-option value="2" label="按冻结代码控制" /> -->
                                    <!-- <el-option value="3" label="按配售代码控制" /> -->
                                    <!-- <el-option value="4" label="按穿透代码控制" /> -->
                                </el-select>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="other">
                    <div class="other-title">其他配置</div>
                    <div>
                        <el-tabs type="border-card" v-model="otherTableIndex">
                            <el-tab-pane name="1" label="实时计算配置" :placeholder="common.joinsqlFormat">
                                <div class="other-tab other-tab1">
                                    <div class="other-tab1-hd" style="text-align: right">
                                        <el-button type="text" @click="checkSql">校验配置</el-button>
                                    </div>
                                    <div class="other-tab1-item">
                                        <span class="other-tab1-item-label" style="line-height: 2">数据来源表：</span>
                                        <span class="other-tab1-item-input">
                                            <el-input v-model="originalBoundConfig.sourceTable" size="mini" style="width: 100%" />
                                        </span>
                                    </div>
                                    <div class="other-tab1-item">
                                        <span class="other-tab1-item-label">证券代码拼接表配置</span>
                                        <span class="other-tab1-item-input">
                                            <el-input
                                                type="textarea"
                                                v-model="originalBoundConfig.joinTableSql"
                                                :placeholder="common.joinsqlFormat"
                                                style="width: 100%"
                                            />
                                        </span>
                                    </div>
                                    <div class="other-tab1-item">
                                        <span class="other-tab1-item-label">证券代码拼接条件配置</span>
                                        <span class="other-tab1-item-input">
                                            <el-input
                                                type="textarea"
                                                v-model="originalBoundConfig.spliceConditionSql"
                                                :placeholder="common.consqlFormat"
                                                style="width: 100%"
                                            />
                                        </span>
                                    </div>
                                    <div class="other-tab1-item" v-show="originalBoundConfig.spliceMethods.includes('1')">
                                        <span class="other-tab1-item-label">产品代码拼接表配置</span>
                                        <span class="other-tab1-item-input">
                                            <el-input
                                                type="textarea"
                                                v-model="originalBoundConfig.rationJoinTableSql"
                                                :placeholder="common.joinsqlFormat"
                                                style="width: 100%"
                                            />
                                        </span>
                                    </div>
                                    <div class="other-tab1-item" v-show="originalBoundConfig.spliceMethods.includes('1')">
                                        <span class="other-tab1-item-label">产品代码拼接条件配置</span>
                                        <span class="other-tab1-item-input">
                                            <el-input
                                                type="textarea"
                                                v-model="originalBoundConfig.rationSpliceConSql"
                                                :placeholder="common.consqlFormat"
                                                style="width: 100%"
                                            />
                                        </span>
                                    </div>
                                    <div class="other-tab1-item" v-show="originalBoundConfig.spliceMethods.includes('2')">
                                        <span class="other-tab1-item-label">冻结代码拼接表配置</span>
                                        <span class="other-tab1-item-input">
                                            <el-input
                                                type="textarea"
                                                v-model="originalBoundConfig.frozenJoinTableSql"
                                                :placeholder="common.joinsqlFormat"
                                                style="width: 100%"
                                            />
                                        </span>
                                    </div>
                                    <div class="other-tab1-item" v-show="originalBoundConfig.spliceMethods.includes('2')">
                                        <span class="other-tab1-item-label">冻结代码拼接条件配置</span>
                                        <span class="other-tab1-item-input">
                                            <el-input
                                                type="textarea"
                                                v-model="originalBoundConfig.frozenSpliceConSql"
                                                :placeholder="common.consqlFormat"
                                                style="width: 100%"
                                            />
                                        </span>
                                    </div>
                                    <div class="other-tab1-item" v-show="originalBoundConfig.spliceMethods.includes('3')">
                                        <span class="other-tab1-item-label">配售代码拼接表配置</span>
                                        <span class="other-tab1-item-input">
                                            <el-input
                                                type="textarea"
                                                v-model="originalBoundConfig.assignJoinTableSql"
                                                :placeholder="common.joinsqlFormat"
                                                style="width: 100%"
                                            />
                                        </span>
                                    </div>
                                    <div class="other-tab1-item" v-show="originalBoundConfig.spliceMethods.includes('3')">
                                        <span class="other-tab1-item-label">配售代码拼接条件配置</span>
                                        <span class="other-tab1-item-input">
                                            <el-input
                                                type="textarea"
                                                v-model="originalBoundConfig.assignSpliceConSql"
                                                :placeholder="common.consqlFormat"
                                                style="width: 100%"
                                            />
                                        </span>
                                    </div>
                                </div>
                            </el-tab-pane>
                            <el-tab-pane name="2" label="静态计算配置">
                                <div class="other-tab other-tab1">
                                    <div class="other-tab1-hd" style="text-align: right">
                                        <el-button type="text" @click="checkSql">校验配置</el-button>
                                    </div>
                                    <div class="other-tab1-item">
                                        <span class="other-tab1-item-label" style="line-height: 2">数据来源表：</span>
                                        <span class="other-tab1-item-input">
                                            <el-input v-model="originalBoundConfig.staticSourceTable" size="mini" style="width: 100%" />
                                        </span>
                                    </div>
                                    <div class="other-tab1-item">
                                        <span class="other-tab1-item-label">证券代码拼接表配置</span>
                                        <span class="other-tab1-item-input">
                                            <el-input
                                                type="textarea"
                                                v-model="originalBoundConfig.staticJoinTableSql"
                                                :placeholder="common.joinsqlFormat"
                                                style="width: 100%"
                                            />
                                        </span>
                                    </div>
                                    <div class="other-tab1-item">
                                        <span class="other-tab1-item-label">证券代码拼接条件配置</span>
                                        <span class="other-tab1-item-input">
                                            <el-input
                                                type="textarea"
                                                v-model="originalBoundConfig.staticSpliceConditionSql"
                                                :placeholder="common.consqlFormat"
                                                style="width: 100%"
                                            />
                                        </span>
                                    </div>
                                    <div class="other-tab1-item" v-show="originalBoundConfig.spliceMethods.includes('1')">
                                        <span class="other-tab1-item-label">产品代码拼接表配置</span>
                                        <span class="other-tab1-item-input">
                                            <el-input
                                                type="textarea"
                                                v-model="originalBoundConfig.staticRationJoinTableSql"
                                                :placeholder="common.joinsqlFormat"
                                                style="width: 100%"
                                            />
                                        </span>
                                    </div>
                                    <div class="other-tab1-item" v-show="originalBoundConfig.spliceMethods.includes('1')">
                                        <span class="other-tab1-item-label">产品代码拼接条件配置</span>
                                        <span class="other-tab1-item-input">
                                            <el-input
                                                type="textarea"
                                                v-model="originalBoundConfig.staticRationSpliceConSql"
                                                :placeholder="common.consqlFormat"
                                                style="width: 100%"
                                            />
                                        </span>
                                    </div>
                                    <div class="other-tab1-item" v-show="originalBoundConfig.spliceMethods.includes('2')">
                                        <span class="other-tab1-item-label">冻结代码拼接表配置</span>
                                        <span class="other-tab1-item-input">
                                            <el-input
                                                type="textarea"
                                                v-model="originalBoundConfig.staticFrozenJoinTableSql"
                                                :placeholder="common.joinsqlFormat"
                                                style="width: 100%"
                                            />
                                        </span>
                                    </div>
                                    <div class="other-tab1-item" v-show="originalBoundConfig.spliceMethods.includes('2')">
                                        <span class="other-tab1-item-label">冻结代码拼接条件配置</span>
                                        <span class="other-tab1-item-input">
                                            <el-input
                                                type="textarea"
                                                v-model="originalBoundConfig.staticFrozenSpliceConSql"
                                                :placeholder="common.consqlFormat"
                                                style="width: 100%"
                                            />
                                        </span>
                                    </div>
                                    <div class="other-tab1-item" v-show="originalBoundConfig.spliceMethods.includes('3')">
                                        <span class="other-tab1-item-label">配售代码拼接表配置</span>
                                        <span class="other-tab1-item-input">
                                            <el-input
                                                type="textarea"
                                                v-model="originalBoundConfig.staticAssignJoinTableSql"
                                                :placeholder="common.joinsqlFormat"
                                                style="width: 100%"
                                            />
                                        </span>
                                    </div>
                                    <div class="other-tab1-item" v-show="originalBoundConfig.spliceMethods.includes('3')">
                                        <span class="other-tab1-item-label">配售代码拼接条件配置</span>
                                        <span class="other-tab1-item-input">
                                            <el-input
                                                type="textarea"
                                                v-model="originalBoundConfig.staticAssignSpliceConSql"
                                                :placeholder="common.consqlFormat"
                                                style="width: 100%"
                                            />
                                        </span>
                                    </div>
                                </div>
                            </el-tab-pane>
                            <el-tab-pane name="3" label="前端展示配置">
                                <div class="other-tab other-tab3">
                                    <div class="other-tab3-hd" style="text-align: right">
                                        <el-button type="text" @click="checkSql">校验配置</el-button>
                                    </div>
                                    <div class="other-tab3-item">
                                        <span class="other-tab3-item-label" style="line-height: 2">前端展示SQL：</span>
                                        <span class="other-tab3-item-input">
                                            <el-checkbox v-model="originalBoundConfig.dictionary" size="mini" style="width: 100%">
                                                取字典表
                                            </el-checkbox>
                                        </span>
                                    </div>
                                    <div class="other-tab3-item" v-show="!originalBoundConfig.dictionary">
                                        <span class="other-tab3-item-label" style="line-height: 2">&nbsp;</span>
                                        <span class="other-tab3-item-input">
                                            <el-input
                                                type="textarea"
                                                v-model="originalBoundConfig.webSql"
                                                :placeholder="common.sqlFormat"
                                                size="mini"
                                                style="width: 100%"
                                            />
                                        </span>
                                    </div>
                                    <div class="other-tab3-item" v-show="originalBoundConfig.dictionary">
                                        <span class="other-tab3-item-label" style="line-height: 2">字典code：</span>
                                        <span class="other-tab3-item-input">
                                            <el-select size="mini" v-model="originalBoundConfig.dictionaryCode" style="width: 100%">
                                                <el-option
                                                    v-for="item in DictionaryCodes"
                                                    :key="item.dictCode"
                                                    :label="item.dictCode + ' ' + item.dictKeyName"
                                                    :value="item.dictCode"
                                                />
                                            </el-select>
                                        </span>
                                    </div>
                                    <div class="other-tab3-item">
                                        <span class="other-tab3-item-label" style="line-height: 2">展示比较方向：</span>
                                        <span class="other-tab3-item-input">
                                            <el-select
                                                size="mini"
                                                v-model="originalBoundConfig.webDirections"
                                                placeholder="可多选"
                                                multiple
                                                collapse-tags
                                                clearable
                                                style="width: 100%"
                                            >
                                                <el-option
                                                    v-for="item in webDirections"
                                                    :key="item.dictKey"
                                                    :label="item.dictKey + ' ' + item.dictKeyName"
                                                    :value="item.dictKey"
                                                />
                                            </el-select>
                                        </span>
                                    </div>
                                    <div class="other-tab3-item">
                                        <span class="other-tab3-item-label" style="line-height: 2">前端展示类型：</span>
                                        <span class="other-tab3-item-input">
                                            <el-select size="mini" v-model="originalBoundConfig.webShowType" style="width: 100%">
                                                <el-option
                                                    v-for="item in stockBoundCfgValueType"
                                                    :key="item.dictKey"
                                                    :label="item.dictKey + ' ' + item.dictKeyName"
                                                    :value="item.dictKey"
                                                />
                                            </el-select>
                                        </span>
                                    </div>
                                    <div class="other-tab3-item">
                                        <span class="other-tab3-item-label" style="line-height: 2">前端过滤类型：</span>
                                        <span class="other-tab3-item-input">
                                            <el-select size="mini" v-model="originalBoundConfig.webFilterType" style="width: 100%">
                                                <el-option
                                                    v-for="item in WebFilterTypes"
                                                    :key="item.dictKey"
                                                    :label="item.dictKey + ' ' + item.dictKeyName"
                                                    :value="item.dictKey"
                                                />
                                            </el-select>
                                        </span>
                                    </div>
                                </div>
                            </el-tab-pane>
                            <el-tab-pane name="4" label="相关条目" v-if="operateType !== 'add'">
                                <div class="other-tab">
                                    <el-table :data="entry" size="mini" border height="calc(100vh - 500px)">
                                        <el-table-column
                                            label="条目编号"
                                            prop="entryCode"
                                            sortable
                                            width="120"
                                            show-overflow-tooltip
                                        ></el-table-column>
                                        <el-table-column label="风险说明" prop="entryName" show-overflow-tooltip></el-table-column>
                                    </el-table>
                                </div>
                            </el-tab-pane>
                            <el-tab-pane name="5" label="相关计算因子配置">
                                <div class="other-tab other-tab5">
                                    <div>
                                        <span>相关计算因子</span>
                                        <el-button type="primary" size="mini" style="float: right" @click="handleClickEditBound">编辑</el-button>
                                    </div>
                                    <el-table :data="filterBoundRelations" size="mini" border height="calc(100vh - 565px)">
                                        <el-table-column label="因子编号" prop="entryCalculateFactorCode" show-overflow-tooltip>
                                            <template slot="header" slot-scope="scope">
                                                <span>{{ scope.column.label }}</span>
                                                <el-popover placement="bottom" width="160" trigger="click">
                                                    <div style="padding: 0 10px 10px 0">
                                                        <el-input v-model="searchBoundRelations" size="mini" clearable />
                                                    </div>
                                                    <i class="el-icon-search" slot="reference" style="cursor: pointer; float: right"></i>
                                                </el-popover>
                                            </template>
                                        </el-table-column>
                                        <el-table-column label="因子名称" prop="entryCalculateFactorName" show-overflow-tooltip></el-table-column>
                                        <el-table-column min-width="200">
                                            <template #default="{ row }">
                                                <el-checkbox v-model="row.staticValid">静态</el-checkbox>
                                                <el-checkbox v-model="row.instValid">指令</el-checkbox>
                                                <el-checkbox v-model="row.earlyValid">日初</el-checkbox>
                                                <el-checkbox v-model="row.entrustValid">委托</el-checkbox>
                                            </template>
                                        </el-table-column>
                                    </el-table>
                                </div>
                            </el-tab-pane>
                            <el-tab-pane name="6" label="数据源维护">
                                <div class="other-tab other-tab6">
                                    <div class="other-tab other-tab6">
                                        <div class="other-tab6-hd">
                                            <span>数据源</span>
                                            <span>
                                                <el-tooltip
                                                    effect="dark"
                                                    content="必选1:关联表,关联表; 必选2: 关联表,关联表|非必选1:关联表,关联表;非必选2;非必选3"
                                                    placement="top-start"
                                                >
                                                    <span>数据源表配置<i class="el-icon-info"></i></span>
                                                </el-tooltip>
                                            </span>
                                            <span>
                                                <el-tooltip effect="dark" content="表1;表2;表3|表B;表C" placement="top-start">
                                                    <span>互斥表配置<i class="el-icon-info"></i></span>
                                                </el-tooltip>
                                            </span>
                                        </div>
                                        <div class="other-tab6-item">
                                            <span>聚源表</span>
                                            <span>
                                                <el-input style="width: 100%" v-model="dataCfg['1'].sourceTable" size="mini" />
                                            </span>
                                            <span>
                                                <el-input style="width: 100%" v-model="dataCfg['1'].mutexTable" size="mini" />
                                            </span>
                                        </div>
                                        <div class="other-tab6-item">
                                            <span>恒生表</span>
                                            <span>
                                                <el-input style="width: 100%" v-model="dataCfg['2'].sourceTable" size="mini" />
                                            </span>
                                            <span>
                                                <el-input style="width: 100%" v-model="dataCfg['2'].mutexTable" size="mini" />
                                            </span>
                                        </div>
                                        <div class="other-tab6-item">
                                            <span>财汇表</span>
                                            <span>
                                                <el-input style="width: 100%" v-model="dataCfg['3'].sourceTable" size="mini" />
                                            </span>
                                            <span>
                                                <el-input style="width: 100%" v-model="dataCfg['3'].mutexTable" size="mini" />
                                            </span>
                                        </div>
                                        <div class="other-tab6-item">
                                            <span>万得表</span>
                                            <span>
                                                <el-input style="width: 100%" v-model="dataCfg['7'].sourceTable" size="mini" />
                                            </span>
                                            <span>
                                                <el-input style="width: 100%" v-model="dataCfg['7'].mutexTable" size="mini" />
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </el-tab-pane>
                        </el-tabs>
                    </div>
                </div>
            </el-col>
            <el-col :span="12" style="height: calc(100vh - 100px); overflow: auto">
                <div class="right">
                    <div class="right-title">
                        <el-tooltip effect="dark" content="自动生成的配置仅供参考" placement="top-start">
                            <span>相关性配置：<i class="el-icon-info"></i></span>
                        </el-tooltip>
                        <el-button
                            v-show="['edit', 'add'].includes(operateType)"
                            size="mini"
                            type="primary"
                            class="right-title-btn"
                            @click="handleResolveKeyGenerate"
                        >
                            生成配置
                        </el-button>
                    </div>
                    <div>
                        <el-input type="textarea" v-model="originalBoundConfig.resolveKey" />
                    </div>
                    <div class="right-title">
                        <span>计算逻辑：</span>
                        <el-button
                            size="mini"
                            v-show="['edit', 'add'].includes(operateType)"
                            type="primary"
                            class="right-title-btn"
                            @click="openMkdownData"
                            >编辑</el-button
                        >
                    </div>
                    <div class="right-markdown">
                        <mavon-editor
                            :subfield="false"
                            default-open="preview"
                            :toolbarsFlag="false"
                            v-model="originalBoundConfigExtra.calLogic"
                            style="width: 100%; height: 100%"
                        />
                        <yh-dialog drag title="编辑信息" :visible.sync="mkdownVisible" width="720px" :close-on-click-modal="false">
                            <mavon-editor
                                :subfield="true"
                                v-model="mkdownData"
                                style="width: 100%; height: 100%"
                                :toolbars="{
                                    readmodel: true,
                                    htmlcode: true, // 展示html源码
                                    subfield: true, // 单双栏模式
                                    preview: true, // 预览
                                }"
                            />
                            <div slot="footer" class="dialog-footer">
                                <el-button size="mini" @click="mkdownVisible = false"> 取 消 </el-button>
                                <el-button size="mini" type="primary" @click="mkdownOnSubmit"> 确 定 </el-button>
                            </div>
                        </yh-dialog>
                    </div>
                </div>
            </el-col>
        </el-row>
        <RangeIndicatorsInfoTrans @on-submit="boundOnsubmit" :visible.sync="boundVisible" :selected="boundRelations" />
        <div style="text-align: right; margin-right: 10px" v-show="['edit', 'add'].includes(operateType)">
            <el-button size="mini" @click="closeTab">取消</el-button>
            <el-button size="mini" type="primary" @click="onSubmit" v-loading="loading">确认</el-button>
        </div>
    </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
import { mixins } from 'vue-class-component';
import { getOriginalBoundDetail, verifyShowSql, generateResolveKey, addOriginalBound, updateOriginalBound } from '../api';
import DictionConstUtil, { awaitAxios, DELETE_CACHE, DELETE_LOCAL_CACHE } from '@/utils/diction-const-util';
import RangeIndicatorsInfoTrans from '@/pages/quota/range-indicators/range-indicators-info/range-indicators-info-trans.vue';
import RiskEmitter from '@/common/mixis/risk-emitter.vue';
import { changeOptions } from '@/utils/tools';

@Component({ name: 'RangeIndicatorsInfo', components: { RangeIndicatorsInfoTrans } })
export default class RangeIndicatorsInfo extends mixins(RiskEmitter) {
    @Prop({ required: true }) readonly operateType: string;
    @Prop({ required: true }) readonly code: string;

    private otherTableIndex = '1';
    private DictionConstUtil = DictionConstUtil;
    private categorys = [{ dictKey: '-1', dictKeyName: '选择全部' }];
    private boundTypes = DictionConstUtil.PojoToList(DictionConstUtil.BoundType1);
    private webDirections = DictionConstUtil.PojoToList(DictionConstUtil.CompareDirection);
    private stockBoundCfgValueType = DictionConstUtil.PojoToList(DictionConstUtil.StockBoundCfgValueType);
    private boundTypeForTables = DictionConstUtil.PojoToList(DictionConstUtil.BoundTypeForTable);
    private DictionaryCodes = [];
    private WebFilterTypes = [];
    private common = {
        cfgExa: '必选1:关联表,关联表; 必选2: 关联表,关联表|非必选1:关联表,关联表;非必选2;非必选3',
        mutexExa: '表1;表2;表3|表B;表C',
        sqlFormat:
            "例子:SELECT A.C_DIC_KEY AS KEY,A.C_DIC_KEY_NAME AS NAME FROM TB_DICTIONARY A WHERE A.C_DIC_CODE = 'Y_000023' ORDER BY A.C_DIC_KEY",
        consqlFormat: '例子:ZQEX.C_ZZ_OUTER_GRADE  :CONTROL_BS :VC_VALUE ',
        joinsqlFormat: '例子:ZQEX;LEFT JOIN TN_BOND_EXTRA ZQEX ON ZQEX.C_STOCK_CODE = ZQXX.C_STOCK_CODE',
        dataCfgFormat: /^(((\w+)(:((\w+),)*\w+)*;(\s)*)*(\w+)(:((\w+),)*\w+)*)*\|?((\w+)(:((\w+),)*\w+)*;(\s)*)*(\w+)(:((\w+),)*\w+)*$/g,
        mutexFormat: /^((\w+;)*\w+\|)*((\w+;)*\w+)$/g,
        codeFormat: /^[a-zA-Z0-9]{3,10}$/g,
    };

    private originalBoundConfig = {
        // 基础数据 --------
        // 范围编号
        boundCode: '',
        // 范围名称
        boundName: '',
        // 范围类型
        boundType: '0',
        // 业务品种
        categoryCodes: [],
        // 来源表简称
        sourceTableShortName: 'DD',
        // 来源表字段
        sourceTableField: '',
        // 项目标识
        projectSymbol: '0',
        // 展示字段
        displayField: '',
        // 单独控制
        separateValid: false,
        // 控制字段
        separateField: '',
        // 是否显示静态详情
        showStaticDetails: 0,

        // 控制维度
        spliceMethods: ['0'],

        // 实时计算配置 --------
        // 数据来源表
        sourceTable: '',
        // 拼接表配置
        joinTableSql: '',
        // 拼接条件配置
        spliceConditionSql: '',
        rationJoinTableSql: '',
        rationSpliceConSql: '',
        staticRationJoinTableSql: '',
        staticRationSpliceConSql: '',

        // 冻结代码
        frozenJoinTableSql: '',
        frozenSpliceConSql: '',
        staticFrozenJoinTableSql: '',
        staticFrozenSpliceConSql: '',

        // 配售代码
        assignJoinTableSql: '',
        assignSpliceConSql: '',
        staticAssignJoinTableSql: '',
        staticAssignSpliceConSql: '',

        // 静态计算配置 --------
        // 数据来源表
        staticSourceTable: '',
        // 拼接表配置
        staticJoinTableSql: '',
        // 拼接条件配置
        staticSpliceConditionSql: '',

        // 前端展示配置 --------
        // 前端展示SQL
        dictionary: false,
        webSql: '',
        // 字典code
        dictionaryCode: '',
        // 展示比较方向
        webDirections: [],
        // 前端展示类型
        webShowType: '0',
        // 前端过滤类型
        webFilterType: '1',

        // 右边 ---------------
        // 相关性配置
        resolveKey: '',
    };

    // 相关计算因子配置
    private boundRelations = [];
    private searchBoundRelations = '';
    private boundVisible = false;

    // 不知道有没有用
    private boundConfigExtendPOs = [];

    // 相关条目
    private entry = [];

    spliceMethodsOptions = [
        { dictKey: '0', dictKeyName: '按证券代码控制', disabled: true },
        { dictKey: '1', dictKeyName: '按产品代码控制' },
    ];

    // 数据源维护
    private dataCfg = {
        '1': {
            // 聚源表
            dataType: '1',
            sourceTable: '',
            mutexTable: '',
        },
        '2': {
            // 恒生表
            dataType: '2',
            sourceTable: '',
            mutexTable: '',
        },
        '3': {
            // 财汇表
            dataType: '3',
            sourceTable: '',
            mutexTable: '',
        },
        '7': {
            // 万得表
            dataType: '7',
            sourceTable: '',
            mutexTable: '',
        },
    };

    private originalBoundConfigExtra = {
        // 范围说明
        boundDescription: '',
        // 计算逻辑
        calLogic: '',
    };

    private mkdownVisible = false;
    private mkdownData = '';
    private loading = false;

    async created() {
        console.log('range-info');
        this.DictionaryCodes = await DictionConstUtil.getDictAll();
        console.log(this.DictionaryCodes, 'DictionaryCodes');

        this.WebFilterTypes = await DictionConstUtil.FNWebFilterType();
        let temp: any = await DictionConstUtil.FNCateGory();
        this.categorys = [{ dictKey: '-1', dictKeyName: '选择全部' }, ...temp];

        if (this.operateType === 'add') {
        } else {
            // 相关计算因子
            this.loading = true;
            const res = await getOriginalBoundDetail(this.code || 'YH420');
            let calculateFactor = await DictionConstUtil.FNCalculateFactor();
            // const boundRelations = calculateFactor.filter(item => res.boundRelations.includes(item.entryCalculateFactorCode));

            const boundRelations = res.boundRelations.map(item => {
                let obj = calculateFactor.find(ele => ele.entryCalculateFactorCode == item.factorCode);
                item = {
                    ...item,
                    entryCalculateFactorCode: item.factorCode,
                    entryCalculateFactorName: obj?.entryCalculateFactorName,
                };
                return item;
            });
            boundRelations.sort((a, b) => a.entryCalculateFactorCode.replace(/[^0-9]/gi, '') - b.entryCalculateFactorCode.replace(/[^0-9]/gi, ''));
            // console.log(JSON.stringify(res, null, 2));
            const originalBoundConfig = {
                // 基础数据 --------
                // 范围编号
                boundCode: res.originalBoundConfig.boundCode || '',
                // 范围名称
                boundName: res.originalBoundConfig.boundName || '',
                // 范围类型
                boundType: res.originalBoundConfig.boundType,
                // 业务品种
                categoryCodes: res.originalBoundConfig.categoryCodes || [],
                // 来源表简称
                sourceTableShortName: res.originalBoundConfig.sourceTableShortName || '',
                // 来源表字段
                sourceTableField: res.originalBoundConfig.sourceTableField || '',
                // 项目标识
                projectSymbol: res.originalBoundConfig.projectSymbol,
                // 展示字段
                displayField: res.originalBoundConfig.displayField || '',
                // 单独控制
                separateValid: res.originalBoundConfig.separateValid || false,
                // 控制字段
                separateField: res.originalBoundConfig.separateField || '',
                // 是否显示静态详情
                showStaticDetails: res.originalBoundConfig.showStaticDetails || 0,
                spliceMethods: res.originalBoundConfig.spliceMethods,
                // 实时计算配置 --------
                // 数据来源表
                sourceTable: res.originalBoundConfig.sourceTable || '',
                // 拼接表配置
                joinTableSql: res.originalBoundConfig.joinTableSql || '',
                // 拼接条件配置
                spliceConditionSql: res.originalBoundConfig.spliceConditionSql || '',
                rationJoinTableSql: res.originalBoundConfig.rationJoinTableSql || '',
                rationSpliceConSql: res.originalBoundConfig.rationSpliceConSql || '',
                staticRationJoinTableSql: res.originalBoundConfig.staticRationJoinTableSql || '',
                staticRationSpliceConSql: res.originalBoundConfig.staticRationSpliceConSql || '',
                frozenJoinTableSql: res.originalBoundConfig.frozenJoinTableSql || '',
                frozenSpliceConSql: res.originalBoundConfig.frozenSpliceConSql || '',
                staticFrozenJoinTableSql: res.originalBoundConfig.staticFrozenJoinTableSql || '',
                staticFrozenSpliceConSql: res.originalBoundConfig.staticFrozenSpliceConSql || '',
                assignJoinTableSql: res.originalBoundConfig.assignJoinTableSql || '',
                assignSpliceConSql: res.originalBoundConfig.assignSpliceConSql || '',
                staticAssignJoinTableSql: res.originalBoundConfig.staticAssignJoinTableSql || '',
                staticAssignSpliceConSql: res.originalBoundConfig.staticAssignSpliceConSql || '',
                // 静态计算配置 --------
                // 数据来源表
                staticSourceTable: res.originalBoundConfig.staticSourceTable || '',
                // 拼接表配置
                staticJoinTableSql: res.originalBoundConfig.staticJoinTableSql || '',
                // 拼接条件配置
                staticSpliceConditionSql: res.originalBoundConfig.staticSpliceConditionSql || '',

                // 前端展示配置 --------
                // 前端展示SQL
                dictionary: res.originalBoundConfig.dictionary,
                webSql: res.originalBoundConfig.webSql || '',
                // 字典code
                dictionaryCode: res.originalBoundConfig.dictionaryCode || '',
                // 展示比较方向
                webDirections: res.originalBoundConfig.webDirections || [],
                // 前端展示类型
                webShowType: res.originalBoundConfig.webShowType || '',
                // 前端过滤类型
                webFilterType: res.originalBoundConfig.webFilterType || '',

                // 右边 ---------------
                // 相关性配置
                resolveKey: res.originalBoundConfig.resolveKey || '',
                // levelSymbol
                levelSymbol: res.originalBoundConfig.levelSymbol || '0',
            };
            // 条目数据
            const entry = res.entry || [];
            let obce = res.originalBoundConfigExtra || {};
            const originalBoundConfigExtra = {
                // 范围说明
                boundDescription: obce.boundDescription || '',
                // 计算逻辑
                calLogic: obce.calLogic || '',
            };

            // 数据源维护
            const dataCfg = res.dataCfg;
            for (const dataCfgElement of dataCfg) {
                const dataType = dataCfgElement.dataType;
                const sourceTable = dataCfgElement.sourceTable;
                const mutexTable = dataCfgElement.mutexTable;
                this.dataCfg[dataType].sourceTable = sourceTable;
                this.dataCfg[dataType].mutexTable = mutexTable;
            }
            this.entry = entry;
            this.originalBoundConfig = originalBoundConfig;
            this.originalBoundConfigExtra = originalBoundConfigExtra;
            this.boundRelations = boundRelations;
            this.boundConfigExtendPOs = res.boundConfigExtendPOs;
            this.loading = false;
        }
    }

    // 业务品种已选项前置
    get computedCategorys() {
        let categorys = changeOptions(this.originalBoundConfig.categoryCodes, this.categorys, 'dictKey');
        return categorys;
    }

    // 范围类型联动操作
    changeBoundType(value) {
        let data = this.boundTypeForTables.filter(item => item.dictKey === value).map(item => item.dictKeyName);
        this.originalBoundConfig.sourceTableShortName = data[0];
    }

    // 来源表字段联动操作
    changeSourceTableField(value) {
        // 缩写.字段  :CONTROL_BS :VC_VALUE
        let data = this.originalBoundConfig.sourceTableShortName + '.' + value.trim() + ' :CONTROL_BS :VC_VALUE';
        this.originalBoundConfig.spliceConditionSql = data;
        this.originalBoundConfig.staticSpliceConditionSql = data;
    }

    // 修改业务品种
    changeCategoryCodes(value) {
        if (value.includes('-1') && value.length > 1) {
            this.yh_message_error('选择全选后，不可再选择其他值');
            this.$nextTick(() => {
                this.originalBoundConfig.categoryCodes = ['-1'];
            });
        }
    }

    // 校验sql
    checkSql() {
        this.verifsql(this.originalBoundConfig).then(res => {
            const isContinue = this.checkParams(res);
            if (!isContinue) {
                return;
            }
            this.yh_message_success('配置正确');
        });
    }

    /**
     * 去后台验证sql是否能正确执行
     * @param {*前端展示sql} originalBoundConfig
     */
    async verifsql(originalBoundConfig) {
        // 验证前端展示sql
        let websql: any = await this.verifyWebsql(originalBoundConfig.webSql);
        let joinSql: any = await this.handleJoinTable(originalBoundConfig, 'joinTableSql');
        let staticJoinSql: any = await this.handleJoinTable(originalBoundConfig, 'staticJoinTableSql');
        let rationJoinTableSql: any = '000000';
        let staticRationJoinTableSql: any = '000000';
        let frozenJoinTableSql: any = '000000';
        let staticFrozenJoinTableSql: any = '000000';
        let assignJoinTableSql: any = '000000';
        let staticAssignJoinTableSql: any = '000000';
        if (this.originalBoundConfig.spliceMethods.includes('1')) {
            rationJoinTableSql = await this.handleJoinTable(originalBoundConfig, 'rationJoinTableSql');
            staticRationJoinTableSql = await this.handleJoinTable(originalBoundConfig, 'staticRationJoinTableSql');
        }
        if (this.originalBoundConfig.spliceMethods.includes('2')) {
            frozenJoinTableSql = await this.handleJoinTable(originalBoundConfig, 'frozenJoinTableSql');
            staticFrozenJoinTableSql = await this.handleJoinTable(originalBoundConfig, 'staticFrozenJoinTableSql');
        }

        if (this.originalBoundConfig.spliceMethods.includes('3')) {
            assignJoinTableSql = await this.handleJoinTable(originalBoundConfig, 'assignJoinTableSql');
            staticAssignJoinTableSql = await this.handleJoinTable(originalBoundConfig, 'staticAssignJoinTableSql');
        }

        return {
            websql,
            joinSql,
            staticJoinSql,
            rationJoinTableSql,
            staticRationJoinTableSql,
            frozenJoinTableSql,
            staticFrozenJoinTableSql,
            assignJoinTableSql,
            staticAssignJoinTableSql,
        };
    }

    // 处理拼接表
    async handleJoinTable(originalBoundConfig: any, param: string) {
        if (!this.isEmpty(originalBoundConfig[param])) {
            let sql = 'SELECT COUNT(1) FROM ';
            let mainTableName = '';
            let mainTableAsName = '';
            let boundType = originalBoundConfig.boundType;
            let sourceTableShortName = originalBoundConfig.sourceTableShortName;

            if (boundType == '3' || boundType == '8') {
                mainTableName = 'TN_STOCK';
                mainTableAsName = 'ZQXX';
            } else if (boundType == '2' || boundType == '10') {
                mainTableName = 'TN_BANK';
                mainTableAsName = 'HDB';
            } else if (boundType == '0') {
                mainTableName = 'TB_FUND';
                mainTableAsName = 'DD';
            }
            if (!this.isEmpty(mainTableName)) {
                let joinTable = originalBoundConfig[param].toLocaleUpperCase();
                sql += mainTableName + ' ' + mainTableAsName + ' ';
                if (joinTable.split(';').length > 1) {
                    joinTable = joinTable.split(';')[1];
                }
                while (joinTable.indexOf('|LEFT') >= 0) {
                    joinTable = joinTable.replace('|LEFT', ' LEFT');
                }
                while (joinTable.indexOf('TABLE_:INDEX') >= 0) {
                    joinTable = joinTable.replace('TABLE_:INDEX', sourceTableShortName);
                }
                while (joinTable.indexOf(':VC_VALUE') >= 0) {
                    joinTable = joinTable.replace(':VC_VALUE', "'1'");
                }
                // eslint-disable-next-line no-template-curly-in-string
                while (joinTable.indexOf('${DAY}') >= 0) {
                    // eslint-disable-next-line no-template-curly-in-string
                    joinTable = joinTable.replace('${DAY}', '1');
                }
                // joinTable = joinTable.toString()
                // joinTable = joinTable.replaceAll('|LEFT',' LEFT');
                // joinTable = joinTable.replaceAll('TABLE_:INDEX',sourceTableShortName);
                // joinTable = joinTable.replaceAll(':VC_VALUE',"'1'");
                // joinTable = joinTable.replaceAll('${DAY}',"1")
                sql += joinTable;
                // eslint-disable-next-line no-return-await
                return await this.verifyWebsql(sql);
            } else {
                return '000000';
            }
        } else {
            return '000000';
        }
    }

    /**
     * 去后台验证sql是否能正确执行
     * @param {*前端展示sql配置} websql
     */
    verifyWebsql(websql) {
        return new Promise((resolve, reject) => {
            verifyShowSql({ sql: websql })
                .then(res => {
                    resolve(res);
                })
                .catch(err => {
                    reject(err);
                });
        });
    }

    // 相关计算因子
    handleClickEditBound() {
        this.boundVisible = true;
    }

    // 过滤计算因子
    get filterBoundRelations() {
        return this.boundRelations.filter(item => {
            let search = this.searchBoundRelations.trim().toLowerCase();
            return item.entryCalculateFactorCode.toLowerCase().indexOf(search) > -1;
        });
    }

    // 相关计算因子 - 回调
    boundOnsubmit(list: any[]) {
        // this.boundRelations = list;

        let retList = list.map((item, index) => {
            // 本身已有部分
            let obj = this.boundRelations.find(ele => ele.factorCode == item.entryCalculateFactorCode);
            if (obj) {
                return {
                    // 接口使用的是factorCode
                    factorCode: obj.entryCalculateFactorCode,
                    entryCalculateFactorCode: obj.entryCalculateFactorCode,
                    entryCalculateFactorName: obj.entryCalculateFactorName,
                    staticValid: obj.staticValid,
                    instValid: obj.instValid,
                    earlyValid: obj.earlyValid,
                    entrustValid: obj.entrustValid,
                };
            } else {
                return {
                    factorCode: item.entryCalculateFactorCode,
                    entryCalculateFactorCode: item.entryCalculateFactorCode,
                    entryCalculateFactorName: item.entryCalculateFactorName,
                    staticValid: true,
                    instValid: true,
                    earlyValid: true,
                    entrustValid: true,
                };
            }
        });
        this.boundRelations = retList;
    }

    // 编辑器 - 打开
    openMkdownData() {
        this.mkdownVisible = true;
        this.mkdownData = this.originalBoundConfigExtra.calLogic;
    }

    // 编辑器 - 提交
    mkdownOnSubmit() {
        this.originalBoundConfigExtra.calLogic = this.mkdownData;
        this.mkdownVisible = false;
    }

    // 生成配置
    handleResolveKeyGenerate() {
        generateResolveKey(this.originalBoundConfig).then(res => {
            this.originalBoundConfig.resolveKey = res.generatorTableKey || '';

            let keyList = res.checkFailTables;
            if (keyList && keyList.length) {
                this.yh_message_error('[' + keyList.join(',') + ']没有在缓存表[TR_OR_BOUND_CONFIG]里配置');
            }
        });
    }

    isEmpty(obj) {
        return typeof obj == 'undefined' || obj == null || obj === '';
    }

    // 关闭当前标签
    closeTab() {
        let typeName = '';
        switch (this.operateType) {
            case 'look':
                typeName = '查看' + this.code;
                break;
            case 'edit':
                typeName = '编辑' + this.code;
                break;
            case 'add':
                typeName = '新增范围指标';
                break;
            default:
                break;
        }
        this.dispatch('RangeIndicators', 'handleTags', {
            type: 'delete',
            name: typeName,
        });
    }
    // 提交
    onSubmit() {
        // 处理数据
        let data = this.handleTranData();
        console.log(data, 'data');

        if (this.verifyItemDetailParam(data)) {
            this.verifsql(data.originalBoundConfig).then(res => {
                const isContinue = this.checkParams(res);
                if (!isContinue) {
                    return;
                }
                if (this.operateType === 'add') {
                    this.loading = true;
                    addOriginalBound(data)
                        .then(res => {
                            this.yh_message_success('提交成功');
                            DELETE_CACHE('BoundCfg');
                            DELETE_LOCAL_CACHE('CalculateFactor');
                            this.closeTab();
                        })
                        .finally(() => {
                            this.loading = false;
                        });
                } else if (this.operateType === 'edit') {
                    this.loading = true;
                    updateOriginalBound(data)
                        .then(res => {
                            this.yh_message_success('提交成功');
                            DELETE_CACHE('BoundCfg');
                            DELETE_LOCAL_CACHE('CalculateFactor');
                            this.closeTab();
                        })
                        .finally(() => {
                            this.loading = false;
                        });
                }
            });
        }
    }

    // 判断字段正确状态
    checkParams(res: any) {
        let isContinue = false;
        if (!this.originalBoundConfig.dictionary && res.websql !== '000000') {
            this.yh_message_error('前端展示sql 语句有问题!');
        } else if (res.joinSql !== '000000') {
            this.yh_message_error('实时计算配置sql 语句有问题!');
        } else if (res.staticJoinSql !== '000000') {
            this.yh_message_error('静态配置sql 语句有问题!');
        } else if (this.originalBoundConfig.spliceMethods.includes('1')) {
            if (res.rationJoinTableSql !== '000000') {
                this.yh_message_error('实时计算配置产品代码sql 语句有问题!');
            } else if (res.staticRationJoinTableSql !== '000000') {
                this.yh_message_error('静态配置产品代码sql 语句有问题!');
            } else if (res.frozenJoinTableSql !== '000000') {
                this.yh_message_error('实时计算配置冻结代码sql 语句有问题!');
            } else if (res.staticFrozenJoinTableSql !== '000000') {
                this.yh_message_error('静态配置冻结代码sql 语句有问题!');
            } else if (res.assignJoinTableSql !== '000000') {
                this.yh_message_error('实时计算配置配售代码sql 语句有问题!');
            } else if (res.staticAssignJoinTableSql !== '000000') {
                this.yh_message_error('静态配置配售代码sql 语句有问题!');
            } else {
                isContinue = true;
            }
        } else {
            isContinue = true;
        }

        return isContinue;
    }

    // 处理提交数据
    handleTranData() {
        // 数据源维护 - dataCfg
        let dataCfgTemp = JSON.parse(JSON.stringify(this.dataCfg));
        let dataCfg = [];
        for (let dataCfgKey in dataCfgTemp) {
            const item = dataCfgTemp[dataCfgKey];
            dataCfg.push(item);
        }
        dataCfg = dataCfg.sort((a, b) => a.dataType - b.dataType).filter(item => item.mutexTable && item.sourceTable);
        let data = {
            originalBoundConfig: JSON.parse(JSON.stringify(this.originalBoundConfig)),
            originalBoundConfigExtra: JSON.parse(JSON.stringify(this.originalBoundConfigExtra)),
            boundRelations: this.boundRelations,
            // .map(item => item.entryCalculateFactorCode),
            dataCfg: dataCfg,
            boundConfigExtendPOs: this.boundConfigExtendPOs,
        };
        if (this.originalBoundConfig.dictionary) {
            data.originalBoundConfig.webSql =
                "SELECT A.C_DIC_KEY AS KEY,A.C_DIC_KEY_NAME AS NAME,'-1' AS CATEGORY,C_DIC_KEY FROM TB_DICTIONARY A WHERE A.C_DIC_CODE = '" +
                this.originalBoundConfig.dictionaryCode +
                "' AND A.C_DIC_KEY != '!' ";
        }
        return data;
    }

    // 校验所填参数是否正确
    verifyItemDetailParam(orginalBound) {
        let result = 'SUCCESS';
        /* *条目基础信息 * */
        let originalBoundConfig = orginalBound.originalBoundConfig;
        // 基础信息-名称
        if (!this.handleVerifyParam(originalBoundConfig.boundName, '原始范围名称', 100)) {
            result = 'error';
            return false;
        }

        if (this.isEmpty(originalBoundConfig.categoryCodes) || originalBoundConfig.categoryCodes.length <= 0) {
            result = '资产范围不能为空';
            this.yh_message_error(result);
            return false;
        }
        // 基础信息-拼接条件配置
        if (!this.handleVerifyParam(originalBoundConfig.spliceConditionSql, '实时计算中的拼接条件配置', 4000)) {
            result = 'error';
            return false;
        }
        // 静态风控来源表
        if (!this.handleVerifyParam(originalBoundConfig.staticSourceTable, '静态计算中来源表', 30)) {
            result = 'error';
            return false;
        }
        // 基础信息-前端展示sql
        if (!originalBoundConfig.dictionary && !this.handleVerifyParam(originalBoundConfig.webSql, '前端展示sql', 4000)) {
            result = 'error';
            return false;
        }

        // 基础信息-显关系配置
        if (!this.handleVerifyParam(originalBoundConfig.resolveKey, '相关性配置', 2000)) {
            result = 'error';
            return false;
        }

        if (!this.handleVerifyParam(originalBoundConfig.webShowType, '前端展示类型')) {
            result = 'error';
            return false;
        }
        if (!this.handleVerifyParam(originalBoundConfig.webFilterType, '前端过滤类型')) {
            result = 'error';
            return false;
        }

        if (this.isEmpty(originalBoundConfig.webDirections) || originalBoundConfig.webDirections.length <= 0) {
            result = '前端展示的比较方向不能为空';
            this.yh_message_error(result);
            return false;
        }
        let reValue = originalBoundConfig.boundCode;
        let isEmp = this.isEmpty(reValue);
        if (!isEmp) {
            var reg = this.common.codeFormat;
            var isRex = reg.test(reValue);
            reg.lastIndex = 0;
            if (!isRex) {
                result = '范围编号[A-Za-z0-9]{3,10}规则有误!';
                this.yh_message_error(result);
                return false;
            }
        }

        if (originalBoundConfig.dictionary && (this.isEmpty(originalBoundConfig.dictionaryCode) || originalBoundConfig.dictionaryCode.length <= 0)) {
            result = '请选择字典code!';
            this.yh_message_error(result);
            return false;
        }

        if (!this.handleVerifyDataCfg(orginalBound)) {
            result = 'error';
            return false;
        }

        if (result === 'SUCCESS') {
            return true;
        }
        return result;
    }

    /**
     * 验证数据源
     */
    handleVerifyDataCfg(orginalBound) {
        let verifyValue = true;
        let dataCfgs = [].concat(orginalBound.dataCfg);
        let isEmpty = this.isEmpty(dataCfgs);
        // 加入数组
        if (!isEmpty) {
            for (let i = 0; i < dataCfgs.length; i++) {
                let value = dataCfgs[i].sourceTable;
                if (!this.isEmpty(value)) {
                    let reg = this.common.dataCfgFormat;
                    let gz = this.common.cfgExa;
                    let isRex = reg.test(value);
                    reg.lastIndex = 0;
                    if (!isRex) {
                        this.yh_message_error('配置规则有误,参考:' + gz);
                        verifyValue = false;
                        break;
                    }
                }
                let mutexTable = dataCfgs[i].mutexTable;
                if (!this.isEmpty(mutexTable)) {
                    let reg1 = this.common.mutexFormat;
                    let gz1 = this.common.mutexExa;
                    let isRex1 = reg1.test(mutexTable);
                    reg1.lastIndex = 0;
                    if (!isRex1) {
                        this.yh_message_error('配置规则有误,参考:' + gz1);
                        verifyValue = false;
                        break;
                    }
                }
            }
        }
        return verifyValue;
    }

    // 检验参数
    handleVerifyParam(name, desc, length?: any) {
        let result;
        if (!name) {
            result = desc + '不能为空';
            this.yh_message_error(result);
            return false;
        } else {
            if (!length) {
                return true;
            }
            // eslint-disable-next-line
            let strLength = name.replace(/[^\x00-\xff]/g, '01').length;
            if (strLength > length) {
                result = desc + '太长，不能超过' + length + '个字符';
                this.yh_message_error(result);
                return false;
            }
        }
        return true;
    }

    // 下拉多选框
    customSelectReturn(keys: any): void {
        console.log(keys);
        this.originalBoundConfig.spliceMethods = keys;
    }
}
</script>

<style lang="scss" scoped>
.range-indicators-info {
    //overflow: auto;
}

.range-indicators-info /deep/ {
    .left {
        border-bottom: 1px solid #cacaca;
        padding: 5px;
    }

    .left {
        .left-base {
            padding: 5px 0;
            border-bottom: 1px solid #e8e8e8;
        }

        .left-baseinfo {
            padding: 5px 0;
            display: flex;
            flex-wrap: wrap;

            .left-baseinfo-item {
                display: flex;
                flex-wrap: nowrap;
                width: 50%;
                padding: 5px;
                white-space: nowrap;
                overflow: hidden;

                .left-baseinfo-item-label {
                    line-height: 1.8;
                    width: 80px;
                    text-align: right;
                }

                .left-baseinfo-item-input {
                    width: calc(100% - 80px);

                    .el-select {
                        width: 100%;
                    }

                    .el-select__tags {
                        overflow: hidden;
                        flex-wrap: nowrap;
                    }
                }
            }
        }
    }

    .other {
        border-bottom: 1px solid #cacaca;
        padding: 5px;
    }

    .other {
        .other-title {
            padding: 5px 0;
            border-bottom: 1px solid #e8e8e8;
        }

        .other-tab {
            overflow: auto;
            height: calc(100vh - 530px);
        }

        .other-tab1 {
            // height: calc(100vh - 495px);
            padding: 0 20px 0 10px;
            .other-tab1-hd,
            .other-tab1-item {
                margin-bottom: 5px;
            }
            .other-tab1-item {
                display: flex;
                margin-bottom: 10px;

                .other-tab1-hd-label {
                    width: 110px;
                    flex-shrink: 0;
                }
                .other-tab1-item-label {
                    width: 145px;
                    flex-shrink: 0;
                    line-height: 54px;
                }

                .other-tab1-hd-input,
                .other-tab1-item-input {
                    flex-grow: 1;
                }

                // .other-tab1-item-label {
                //     line-height: 54px;
                // }
            }
        }

        .other-tab2 {
            .other-tab2-hd,
            .other-tab2-item {
                display: flex;
                margin-bottom: 10px;

                .other-tab2-hd-label,
                .other-tab2-item-label {
                    width: 110px;
                    flex-shrink: 0;
                }

                .other-tab2-hd-input,
                .other-tab2-item-input {
                    flex-grow: 1;
                }

                .other-tab2-item-label {
                    line-height: 54px;
                }
            }
        }

        .other-tab3 {
            // height: calc(100vh - 495px);
            .other-tab3-hd,
            .other-tab3-item {
                margin-bottom: 5px;
            }
            .other-tab3-item {
                display: flex;

                .other-tab3-hd-label,
                .other-tab3-item-label {
                    width: 110px;
                    flex-shrink: 0;
                }

                .other-tab3-hd-input,
                .other-tab3-item-input {
                    flex-grow: 1;
                    line-height: 1;
                }

                .other-tab3-item-label {
                    line-height: 1;
                }
            }
        }

        .other-tab5 {
            .el-checkbox {
                margin-right: 12px !important;
            }
            .el-checkbox__label {
                padding-left: 5px !important;
            }
        }
        .other-tab6 {
            .other-tab6-hd,
            .other-tab6-item {
                margin-bottom: 5px;
            }

            .other-tab6-hd {
                display: flex;
                flex-wrap: nowrap;

                & > span {
                    text-align: center;
                    font-weight: bold;
                    white-space: nowrap;

                    &:nth-child(1) {
                        width: 70px;
                        flex-shrink: 0;
                    }
                    &:nth-child(2) {
                        flex-grow: 2;
                    }
                    &:nth-child(3) {
                        flex-grow: 1;
                    }
                }
            }

            .other-tab6-item {
                display: flex;
                flex-wrap: nowrap;

                & > span {
                    white-space: nowrap;

                    &:nth-child(1) {
                        width: 70px;
                        flex-shrink: 0;
                    }
                    &:nth-child(2) {
                        flex-grow: 2;
                    }
                    &:nth-child(3) {
                        flex-grow: 1;
                    }
                }
            }
        }
    }

    .right {
        border-bottom: 1px solid #cacaca;
        padding: 5px;
    }

    .right {
        .right-title {
            padding: 5px 0;
            display: flex;
            justify-content: space-between;
            //border-bottom: 1px solid #e8e8e8;

            .right-title-btn {
                padding-top: 4px;
                padding-bottom: 4px;
            }
        }

        .right-instructions {
            textarea {
                height: 150px !important;
            }
        }

        .right-markdown {
            height: calc(100vh - 235px);
            border: 1px solid #c5c6c7;
            overflow: auto;

            .el-dialog__body {
                height: 500px;
                max-height: none;
            }
        }
    }
}

.select-dis {
    /deep/.el-select__tags .el-tag.el-tag--info:first-child .el-tag__close {
        display: none;
    }
}

.el-select-dropdown__item.is-disabled {
    color: #c5c6c7 !important;
}
</style>
